<template>
  <div id="app">
    <ul>
      <li v-for="(item,index) in navs" :key="index">{{item.title}}</li>
    </ul>头像预览：
    <img :src="showHead" width="100" height="100" alt />
    <br />头像上传：
    <input type="file" @change="uploadHead($event)" />
    <br />
    <div class="progress-wrap">
      <div class="progress" :style="{width:progressVal+'%'}"></div>
    </div>
    <input type="text" placeholder="用户名" v-model="username" />
    <br />
    <input type="text" placeholder="密码" v-model="password" />
    <br />
    <button type="button" @click="doLogin()">登录</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "app",
  data() {
    return {
      navs: [],
      username: "",
      password: "",
      showHead: "",
      progressVal: 0
    };
  },
  components: {},
  created() {
    axios
      .get(
        "http://vueshop.glbuys.com/api/home/index/nav?token=1ec949a15fb709370f"
      )
      .then(res => {
        // console.log(res);
        if (res.data.code === 200) {
          this.navs = res.data.data;
        }
      });
  },
  methods: {
    doLogin() {
      if (this.username.match(/^\s*$/)) {
        alert("请输入用户名");
        return;
      }
      if (this.password.match(/^\s*$/)) {
        alert("请输入密码");
        return;
      }
      let params = new URLSearchParams();
      params.append("cellphone", this.username);
      params.append("password", this.password);
      axios
        .post(
          "http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f",
          params
        )
        .then(res => {
          console.log(res);
        });
    },
    //头像上传
    uploadHead(e) {
      let data = new FormData();
      data.append("headfile", e.target.files[0]);
      var config = {
        onUploadProgress: progressEvent => {
          var percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          // console.log(percentCompleted);
          this.progressVal = percentCompleted;
        }
      };
      axios
        .post(
          process.env.VUE_APP_API +
            "/user/myinfo/formdatahead?token=" +
            process.env.VUE_APP_TOKEN,
          data,
          config
        )
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.showHead =
              "http://vueshop.glbuys.com/userfiles/head/" + res.data.data.msbox;
          }
        });
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.progress-wrap {
  width: 300px;
  height: 25px;
  border: 1px solid #cccccc;
}
.progress-wrap .progress {
  width: 0%;
  height: 100%;
  background-color: #0000ff;
}
</style>
